import {Button} from "antd";
import MessageContent from "./MessageContent";
import {useState} from "react";

const MessageList = (props) => {

    const {pageQueryMessageInfo} = props;

    const [messageContentVisible, setMessageContentVisible] = useState(false);
    const [messageContent, setMessageContent] = useState('');

    // 表头css
    const titleCss = {
        boxSizing: 'border-box',
        width: '17%',
        flexWrap: 'wrap',
        wordBreak: 'break-all',
        border: '1px solid #e8e8e8',
        minHeight: '50px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: '10px',
        paddingBottom: '10px',
        backgroundColor: '#fafafa'
    };

    // 内容css
    const contentCss = {
        boxSizing: 'border-box',
        width: '17%',
        flexWrap: 'wrap',
        wordBreak: 'break-all',
        border: '1px solid #e8e8e8',
        minHeight: '50px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: '10px',
        paddingBottom: '10px'
    }

    return (
        <div style={{marginTop: '20px'}}>

            <div style={{display: 'flex', marginTop: '10px', fontWeight: 'bolder'}}>
                <div style={titleCss}>消息Key</div>
                <div style={titleCss}>Topic</div>
                <div style={titleCss}>消费状态</div>
                <div style={titleCss}>创建时间</div>
                <div style={titleCss}>重试次数</div>
                <div style={{...titleCss, width: '15%'}}>操作</div>
            </div>

            {pageQueryMessageInfo.messageList.map((item, index) => {
                return (
                    <div key={index} style={{display: 'flex'}}>
                        <div style={{...contentCss}}>{item.messageKey}</div>
                        <div style={{...contentCss}}>{item.topic}</div>

                        {item.statusValue === "消费失败" ?
                            <div style={{...contentCss, color:'red'}}>{item.statusValue}</div> :
                            <div style={{...contentCss}}>{item.statusValue}</div>
                        }

                        <div style={{...contentCss}}>{item.createdTime}</div>

                        {item.retryCount < 3 ?
                            <div style={{...contentCss}}>{item.retryCount}</div> :
                            <div style={{...contentCss, color: 'red', fontWeight:'bolder'}}>{item.retryCount}</div>
                        }

                        <div style={{...contentCss, width: '15%'}}>
                            <Button
                                style={{borderColor: 'blue', color: 'blue'}}
                                onClick={() => {
                                    setMessageContentVisible(true);
                                    setMessageContent(item.messageContent);
                                }}
                            >
                                查看消息内容
                            </Button>
                        </div>
                    </div>
                )
            })}

            {pageQueryMessageInfo.messageList.length === 0 && (
                <div>
                    <div style={{...contentCss, width: '100%'}}>暂无数据</div>
                </div>
            )}

            {/* 消息内容详情modal */}
            <MessageContent
                messageContentVisible={messageContentVisible}
                setMessageContentVisible={setMessageContentVisible}
                messageContent={messageContent}
                setMessageContent={setMessageContent}
            />

        </div>
    )
}

export default MessageList;